<template>
	<view class="nav-bar">
		<view class="nav-bar-wrapper pf" :style="{ padding, background: bg, color }">
			<view :style="{ height: menuHeight + 'px' }" class="flex-align">
				<view class="back-icon" v-if="showBack">
					<van-icon name="arrow-left" @click="back" size="22" :color="color" />
				</view>
				<view style="line-height: 1;">
					<slot>{{ title }}</slot>	
				</view>
			</view>
		</view>
		
		<view class="nav-bar-placeholder" :style="{
			height: navBarHeight + 'px'
		}"></view>
	</view>
</template>

<script>
export default {
	props: {
		title: String,
		color: {
			type: String,
			default: '#000'
		},
		bg: {
			type: String,
			default: 'transparent'
		}
	},
	data() {
		return {
			padding: '10px 7px',
			menuHeight: 30,
			navBarHeight: 50
		}
	},
	computed: {
		showBack() {
			const pages = getCurrentPages();
			return pages.length !== 1; 
		}
	},
	created() {
		// #ifdef MP-WEIXIN
		const { menuTop, menuRight, menuWidth, menuBottom, menuHeight, navBarHeight } = getApp().globalData;
		this.padding = `${menuTop}px ${menuRight * 2 + menuWidth}px ${menuBottom}px ${menuRight}px`;
		this.menuHeight = menuHeight;
		this.navBarHeight = navBarHeight;
		// #endif
	},
	methods: {
		back() {
			uni.navigateBack();
		}
	}
}
</script>

<style scoped lang="scss">
.nav-bar {
	.nav-bar-wrapper {
		top: 0;
		left: 0;
		width: 100%;
		transition: background 0.2s, color 0.2s;
		z-index: 999;
		
		.back-icon {
			margin-right: 6rpx;
		}
	}
}
</style>
